<script setup>

import CustomInput from "@/components/CustomInput.vue";
import {ref} from "vue";
import {useRoute, useRouter} from "vue-router";
import request from "@/assets/request.js";
import Message from "@/components/Message.vue";

const files = ref({})

const data = ref("")

const messageRef = ref()

const router = useRouter()
const route = useRoute()

const formFiles = () => {
    const formData = new FormData(document.querySelector('#uploadForm'))
    submitFiles(formData)
}

const dropFiles = (event) => {
  const files = event.dataTransfer.files
  const formData = new FormData()
  for (let i = 0; i < files.length; i++) {
    formData.append('files', files[i])
  }
  submitFiles(formData)
}

const submitFiles = async (formData) => {
  console.log(formData.getAll('files'))
  const response = await request('files', 'POST', formData, true, false, true)

  if (response.status === 200) {
    files.value = response.message
  } else {
    messageRef.value.showMessage('Произошла ошибка', response.message, 8000)
  }
}

const downloadFile = async (id, name) => {
  const response = await request(`files/${id}`, 'GET', null, true, true)
  let blob = await response.blob()
  const url = window.URL.createObjectURL(blob)
  const a = document.createElement('a')
  a.href = url
  a.download = name
  a.click()

  window.URL.revokeObjectURL(blob)
}
</script>

<template>
<div class="container-start">
  <form id="uploadForm" enctype="multipart/form-data">
    <input type="file" multiple name="files" id="files" @change="formFiles">
  </form>
  <div class="drop-area" @dragover.prevent @dragenter.prevent @drop.prevent="dropFiles">

    Перетащи файлы сюда для загрузки

  </div>

  <transition-group name="grid" tag="div" class="grid-files">
      <div class="file-card" v-for="file in files" :key="file.file_id" :class="{red: !file.success}">
        <span class="files-info"><span class="files-info-title">Имя файла: </span>{{ file.name }}</span>
        <div class="file-buttons" v-show="file.success">
          <button class="download" @click="downloadFile(file.file_id, file.name)">Скачать</button>
        </div>
      </div>
  </transition-group>

    <Message ref="messageRef"/>
</div>
</template>

<style scoped>

.drop-area{
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 100%;
  height: 400px;

  background: #2c3e50;
  border: #42b883 solid 5px;
  border-radius: 16px;

  color: white;
  font-size: 22px;

  margin-bottom: 40px;

}
  input {
    width: 100%;
    background: #2c3e50;
    outline: none;
    padding: 11px 13px;
    border-radius: 24px;
    color: white;
    font-size: 16px;
    transition: all ease-in-out .25s, margin-bottom 0s;
    border: #3cff95 solid 3px;
    cursor: pointer;
  }

  form {
    width: 100%;
    margin-bottom: 40px;
  }

  .grid-files {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
    gap: 50px;
    width: 100%;
  }

  .file-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 20px;
    background: #2c3e50;
    border: 3px #2c3e50 solid;
    border-radius: 16px;
    transition: all .25s ease-in-out;
  }

  .red {
      border: 3px #ff3e51 solid;
  }

  .download:hover {
    box-shadow: 0px 0px 7px 3px #00f665;
    border: #00f665 2px solid;
  }

  .files-info {
    font-size: 16px;
  }

  .files-info-title {
    color: white;
  }

  .file-buttons {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
    gap: 10px;
  }

  button {
    padding: 10px 12px;
    background: #282828;
    color: white;
    outline: none;
    border: #282828 2px solid;
    font-size: 16px;
    border-radius: 8px;
    transition: all .5s;
  }



  .grid-enter, .grid-leave-to {
    opacity: 0;
  }

  .grid-leave-active {
    position: absolute;
  }
</style>